﻿$(function() {
/*
	//文件放在服务器端 可直接访问;
{
	"data-id": "1",//唯一ID
	"title": "DEF",//显示在小图下方的TITLE 默认 //{var}
	"year": "2008",//年份
	"place": "北京",//项目地址
	"assort": "城市规划",//项目分类
	"plan": "概念",//项目进度
	"src": "",//小图地址 请使用相对地址 默认 // "images/indexPic/dataid_{var}.jpg";
	"bSrc": "",//大图地址 请使用相对地址 默认 // "images/indexPic/bigDataid_{var}.jpg";
	"href": "",//点击的链接 //默认 picshow.html?dataid={var};
	"width": "",//弹出窗口的宽 //整型 //默认800;
	"height": ""//弹出的窗口的高 //整型 //默认600;
}
*/


	//数据开始排序
	$("#SortContent").sortContent();//主要方法触发
	
	//监听事件
	$("#SortBtn span").live("click",function(){
		showDomSort(this);//按钮监听
	})
	
	//小图A链接事件
	$("#SortContent li a").live({
		"mouseenter":function(){overShowBigPic(this)},
		"mouseout":function(){leaveShowSmallPic(this)},
		"click":function(){showSmallWin(this)}
	});
	
	//小图事件
	$("#SortContent li img").live({
		"mouseenter":function(){$(this).stop().animate({opacity:0})	},
		"mouseout":function(){$(this).stop().animate({opacity:1})}
	});
	

});



(function($) {
	var S;//设置命名空间
	$.fn.sortContent = function(){
		S.init();
	}
	S = {
		init:function(){
			S.row = 8;//设置行
			S.col = 16;//设置列
			S.space = 55;//盒子大小
			S.grid = {};//网格对象
			S.setGrid(S.grid,S.row,S.col);//初始化网格对象
			S.cont = $("#SortContent");//取得内容对象
			S.getData();//载入数据并筛选数据
			
		},
		getData:function(){//获取数据
			//$.ajax({
			//	url:"data/data.js",
			//	dataType:"json",
			//	success:function(data){
					data = hyData;
					S.order = data.order;
					S.navObj = clone(S.order);//深度拷贝 一份 用于打印类型
					S.unit = data.unit;
					S.filterData(S.order);
					for(var i in S.order){
						var obj = clone(S.grid);
						var dom = S.order[i];
						S.linkDom(obj,dom);
						S.writeDom(i,obj);
						setTimeout(function(){$("#SortBtn span:eq(0)").trigger("click")},0)
					}
			//	}
			//})
		},
		cloneGrid:function(i,obj){
			var cloneObj = jsonToProto(obj);
			return cloneObj;
		},
		filterData:function(order){//数据按主要分类进行拷贝
			for(var i in order){
				S.insertSecData(order[i],i,S.unit)
			}
		},
		insertSecData:function(val,key,data){//插入二级分类数据(主分类值,主分类键,data)
			for(var i in data){
				var key2 = data[i][key];
				val[key2].push(data[i]);
			}
		},
		setGrid:function(obj,row,col){//设置网格初始化(行,列)
			for(var i=0;i<row;i++){
				obj[i] = {};
				for(var j=0;j<col;j++){
					obj[i][j] = {};
					obj[i][j].row = i;
					obj[i][j].col = j;
					obj[i][j].val = 0;
				}
			}
		},
		linkDom:function(obj,dom){//链接网格对象与数据对象(网格对象,数据对象(二级))
			for(var i in dom){
				for(var j=0,len = dom[i].length;j<len;j++){
					var selfObj = S.findObjVal(obj);
					if(selfObj){
						if(j == 0 && selfObj.row != 0){//新二级分类没换行
							selfObj.val = 1;
							j--;
							continue;
						}
						if(j==0 && selfObj.row == 0){//新二级分类换行
							selfObj.newRow = 1;
						}
						selfObj.val = 1;//写入值
						selfObj.dom = dom[i][j];
					}
				}
			}
		},
		findObjVal:function(obj){//判断网格格子对象是否为空 返回格子对象
			var row = S.row;
			var col = S.col;
			for(var i = 0;i<col;i++){
				for(var j = 0;j<row;j++){
					if(obj && obj[j] && obj[j][i] && !obj[j][i].val){
						return obj[j][i];
					}
				}
			}
			return false;
		},
		writeDom:function(type,obj){//写入网格对象(写入类型,网格对象)并输出html
			var dom = $("#" + type);
			var navDom = $("#" + type +"Nav")
			var html = "";
			var htmlNav = "";
			for(var i in obj){
				if(i == 0){ var len = S.getColLen(type,obj[i]); }//取得一共有多少列
				for(var j in obj[i]){
					var self = obj[i][j];
					if(self.dom){
						var left = Math.ceil((S.col-len)/2)*S.space + j*S.space;
						var top = S.space*(S.row-1)-(i*S.space);
						var attr = self.dom;
						var title = ""
						var orderTypeList = S.order[type][self.dom[type]];
						if(i == 0 && orderTypeList[0] == attr){//判断是否是第一行 && 是否是第一个
							var c = Math.ceil(orderTypeList.length/S.row);
								htmlNav += '<li data-id="';
								htmlNav += attr["data-id"] + '" style="left:'+left+'px;width:'+c*S.space+'px">';
								htmlNav += attr[type];
								htmlNav += '</li>';
						}
						html += "<li ";
						html += 'data-id="' + attr["data-id"] + '"';
						html += ' style="';
						html += 'left:'+left+'px;';
						html += 'top:'+ top +'px; ';
						html += '">';
						if(!attr["src"]){//判断是否有小图
							 attr["src"] = "images/indexPic/dataid_" + attr["data-id"] + ".jpg";
						}
						var smallImg = '<img src="'+attr["src"]+'" />';
						if(!attr["bSrc"]){//判断是否有大图
							attr["bSrc"] = "images/indexPic/bigDataid_" + attr["data-id"] + ".jpg";
						}
						var bigImg = 'style="background-image:url('+attr["bSrc"]+')"';
						if(!attr["width"]){//判断是否有窗口宽
							attr["width"] = 800;
						}
						if(!attr["height"]){//判断是否有窗口高
							attr["height"] = 600;
						}
						if(!attr["href"]){//判断是否有URL
							attr["href"] = "picshow.html?dataid=" + attr["data-id"];
						}
						if(attr["title"]){//判断是否有标题
							title = attr["title"];
						}else{
							title = attr["data-id"];
						}
						html += '<a '+bigImg+' hideFocus wWidth='+attr["width"]+' wHeight='+attr["height"]+' title="'+attr["title"]+'" href="javascript:void(0);" url="'+attr["href"]+'">'+ smallImg +'</a>';
						html += '<p>'+title+'</p>'
						html += '</li>\n';
					}
				}
			}
			dom.html(html);
			navDom.html(htmlNav);
		},
		getColLen:function(type,rowAry){//获得数组有数据对象的长度；(行数组)
			var len=0;
			for(var i in rowAry){
				if(rowAry[i].dom){
					len ++;
				}
			}
			return len;
		}
	}
})(jQuery);


//鼠标经过小图触发事件
function overShowBigPic(obj){
	var $obj = $(obj);
	$obj.parent().css("z-index","600");
	$obj.css("z-index","600");
	$obj.stop().animate({
		left:-28,
		top:-28,
		width:90,//鼠标经过后的放大的大小
		height:90
	},300,"swing")
}

//鼠标移出大图触发事件
function leaveShowSmallPic(obj){
	var $obj = $(obj);
	$obj.parent().css("z-index","100");
	$obj.css("z-index","100");
	$obj.stop().animate({
		left:0,
		top:0,
		width:35,//鼠标还原后的大小
		height:35
	},300,"swing")
}

//按钮触发动画
function showDomSort(dom){
	var $dom = $(dom);
	if($dom.hasClass("selected")){return false;}//如果当前高亮返回
	$dom.parent().find(".selected").removeClass("selected");//查找原来高亮的
	$dom.addClass("selected");//当前添加高亮
	var type = $dom.attr("typeId");
	var cont= $("#SortContent");
	cont.find("ul:eq(0)").quicksand(cont.find("#"+type + " li"),{
		adjustHeight:false,
		attribute: 'data-id',
		duration:500
	});
	var navCont = $("#SortNav");
	navCont.find("ul:eq(0)").html(navCont.find("#"+type + "Nav li").clone());
}

//打开小图窗口
function showSmallWin(dom){
	var $obj = $(dom);
	var href = $obj.attr("url");
	var height = $obj.attr("wHeight");
	var width = $obj.attr("wWidth");
	window.open(href,'','height='+height+',width='+width+',top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=no,status=no');
	return false;
}

//普通拷贝
function jsonToProto(o){
	var f = function () {};
	f.prototype = o;
	return new f;	
}

//深度拷贝
function clone(jsonObj) {
    var buf;
    if (jsonObj instanceof Array) {
        buf = [];
        var i = jsonObj.length;
        while (i--) {
            buf[i] = clone(jsonObj[i]);
        }
        return buf;
    }else if (jsonObj instanceof Object){
        buf = {};
        for (var k in jsonObj) {
            buf[k] = clone(jsonObj[k]);
        }
        return buf;
    }else{
        return jsonObj;
    }
} 


//图片预加载
var imgReady = (function () {
	var list = [], intervalId = null,

	// 用来执行队列
	tick = function () {
		var i = 0;
		for (; i < list.length; i++) {
			list[i].end ? list.splice(i--, 1) : list[i]();
		};
		!list.length && stop();
	},

	// 停止所有定时器队列
	stop = function () {
		clearInterval(intervalId);
		intervalId = null;
	};

	return function (url, ready, load, error) {
		var onready, width, height, newWidth, newHeight,
			img = new Image();

		img.src = url;

		// 如果图片被缓存，则直接返回缓存数据
		if (img.complete) {
			ready.call(img);
			load && load.call(img);
			return;
		};

		width = img.width;
		height = img.height;

		// 加载错误后的事件
		img.onerror = function () {
			error && error.call(img);
			onready.end = true;
			img = img.onload = img.onerror = null;
		};

		// 图片尺寸就绪
		onready = function () {
			newWidth = img.width;
			newHeight = img.height;
			if (newWidth !== width || newHeight !== height ||
				// 如果图片已经在其他地方加载可使用面积检测
				newWidth * newHeight > 1024
			) {
				ready.call(img);
				onready.end = true;
			};
		};
		onready();

		// 完全加载完毕的事件
		img.onload = function () {
			// onload在定时器时间差范围内可能比onready快
			// 这里进行检查并保证onready优先执行
			!onready.end && onready();

			load && load.call(img);

			// IE gif动画会循环执行onload，置空onload即可
			img = img.onload = img.onerror = null;
		};

		// 加入队列中定期执行
		if (!onready.end) {
			list.push(onready);
			// 无论何时只允许出现一个定时器，减少浏览器性能损耗
			if (intervalId === null) intervalId = setInterval(tick, 40);
		};
	};
})();